.ul {
  padding-left: var(--spacing-4);
  margin: var(--spacing-3) 0;
  list-style: disc;
  list-style-position: outside;
}

/* When all list items start with emoji, remove left padding */
@supports selector(:has(*)) {
  /* Only remove padding if ALL direct li children have liWithEmoji class */
  .ul:not(:has(> .li:not(.liWithEmoji))) {
    padding-left: 0;
  }
}

.ol {
  padding-left: var(--spacing-4);
  margin: var(--spacing-3) 0;
  list-style: decimal;
  list-style-position: outside;
}

.li {
  margin-bottom: var(--spacing-2);
  line-height: 1.6;
  color: var(--global-body-text);
}

/* Hide bullet points for list items that start with emoji */
.liWithEmoji {
  list-style: none;
}

.li:last-child {
  margin-bottom: 0;
}

/* Nested lists - add indentation */
.li > .ul,
.li > .ol {
  padding-left: var(--spacing-5);
  margin-top: var(--spacing-1);
  margin-bottom: var(--spacing-1);
}

/* First-level lists at the beginning/end */
.ul:first-child,
.ol:first-child {
  margin-top: 0;
}

.ul:last-child,
.ol:last-child {
  margin-bottom: 0;
}

.h1 {
  margin-top: var(--spacing-6);
  margin-bottom: var(--spacing-4);
  font-size: var(--font-size-9);
  font-weight: 700;
  line-height: 1.3;
  color: var(--global-foreground);
}

.h2 {
  margin-top: var(--spacing-5);
  margin-bottom: var(--spacing-3);
  font-size: var(--font-size-7);
  font-weight: 600;
  line-height: 1.3;
  color: var(--global-foreground);
}

.h3 {
  margin-top: var(--spacing-4);
  margin-bottom: var(--spacing-2);
  font-size: var(--font-size-6);
  font-weight: 600;
  line-height: 1.3;
  color: var(--global-foreground);
}

.h4 {
  margin-top: var(--spacing-3);
  margin-bottom: var(--spacing-2);
  font-size: var(--font-size-5);
  font-weight: 600;
  line-height: 1.3;
  color: var(--global-foreground);
}

.h5 {
  margin-top: var(--spacing-3);
  margin-bottom: var(--spacing-2);
  font-size: var(--font-size-4);
  font-weight: 600;
  line-height: 1.3;
  color: var(--global-foreground);
}

.h6 {
  margin-top: var(--spacing-3);
  margin-bottom: var(--spacing-2);
  font-size: var(--font-size-3);
  font-weight: 600;
  line-height: 1.3;
  color: var(--global-foreground);
}

.p {
  margin-top: 0;
  margin-bottom: var(--spacing-2);
  line-height: 1.6;
  color: var(--global-body-text);
}

.h1:first-child,
.h2:first-child,
.h3:first-child,
.h4:first-child,
.h5:first-child,
.h6:first-child,
.p:first-child {
  margin-top: 0;
}

.p:last-child {
  margin-bottom: 0;
}

/* Reduce spacing when p is followed by lists */
.p + .ul,
.p + .ol {
  margin-top: 0;
}

/* Reduce spacing when lists are followed by p */
.ul + .p,
.ol + .p {
  margin-top: 0;
}

/* Text Emphasis Styles */
.strong {
  font-weight: 700;
  color: var(--global-foreground);
}

.em {
  font-style: italic;
}

.del {
  color: var(--global-mute-text);
  text-decoration: line-through;
  opacity: 0.7;
}

/* Blockquote */
.blockquote {
  padding: var(--spacing-3) var(--spacing-4);
  margin: var(--spacing-4) 0;
  color: var(--global-body-text);
  background-color: var(--overlay-5);
  border-left: 3px solid var(--overlay-20);
  border-radius: 0 var(--border-radius-base) var(--border-radius-base) 0;
}

.blockquote:first-child {
  margin-top: 0;
}

.blockquote:last-child {
  margin-bottom: 0;
}

/* Nested blockquotes */
.blockquote .blockquote {
  margin: var(--spacing-2) 0;
  border-left-color: var(--overlay-20);
}

/* Horizontal Rule */
.hr {
  margin: var(--spacing-5) 0;
  border: none;
  border-top: 1px solid var(--global-border);
}

/* Links */
.a {
  color: var(--primary-accent);
  text-decoration: none;
  transition: opacity 0.2s;
}

.a:hover {
  text-decoration: underline;
  opacity: 0.8;
}

/* Tables */
.table {
  width: 100%;
  margin: var(--spacing-4) 0;
  overflow: hidden;
  font-size: inherit;
  border-collapse: collapse;
  background-color: var(--pane-background);
  border-radius: var(--border-radius-base);
  box-shadow: 0 0 0 1px var(--overlay-10);
}

.table:first-child {
  margin-top: 0;
}

.table:last-child {
  margin-bottom: 0;
}

.thead {
  background-color: var(--overlay-5);
  border-bottom: 1px solid var(--overlay-20);
}

.tbody {
  background-color: transparent;
}

.tr {
  border-bottom: 1px solid var(--overlay-10);
  transition: background-color 0.2s;
}

.tbody .tr:hover {
  background-color: var(--overlay-5);
}

.tbody .tr:last-child {
  border-bottom: none;
}

.th {
  padding: var(--spacing-3) var(--spacing-4);
  font-weight: 600;
  color: var(--global-foreground);
  text-align: left;
  white-space: nowrap;
}

.td {
  padding: var(--spacing-3) var(--spacing-4);
  color: var(--global-body-text);
  text-align: left;
}

/* Table wrapper for horizontal scroll on small screens */
.tableWrapper {
  margin: var(--spacing-4) 0;
  overflow-x: auto;
}

/* Alignment classes for table cells */
.th[align='center'],
.td[align='center'] {
  text-align: center;
}

.th[align='right'],
.td[align='right'] {
  text-align: right;
}

/* Inline Code */
.code {
  display: inline-block;
  padding: var(--spacing-half) var(--spacing-1);
  font-family: var(--code-font);
  font-size: 0.9em;
  font-weight: 500;
  line-height: 1.2;
  color: var(--global-body-text);
  background-color: var(--overlay-10);
  border: 1px solid var(--overlay-20);
  border-radius: var(--border-radius-base);
}

/* Code block wrapper for horizontal scroll */
.codeBlockWrapper {
  padding: var(--spacing-4);
  margin: var(--spacing-3) 0;
  overflow-x: auto;
  background-color: rgb(30, 30, 30);
  border-radius: var(--border-radius-base);
}

/* Ensure code blocks have proper styling */
.codeBlockWrapper > div {
  display: inline-block;
  min-width: 100%;
}

.codeBlockWrapper pre {
  padding: 0;
  margin: 0;
}
